﻿
@{
    ViewBag.Title = "EmployeePageList";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css{
    <link rel="stylesheet" href="~/assets/portal/assets/css/common.css" />
    <link rel="stylesheet" href="~/bussiness/js/base/reset.css" />
    <style>
        .ant-select-arrow, .ant-select-clear {
            position: absolute;
            right: 10px;
        }

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #424758;
            display:flex;
            align-items:center;
        }
            .title::before {
                content: "";
                margin-right:10px;
                display: inline-block;
                width: 4px;
                height: 18px;
                background: #0064E5;
            }
        .stable {
            border-collapse: collapse; /* 折叠边框，使之变为单一线划分 */
            border: 1px solid #e1e5ea; /* 设置表格、表头、单元格边框 */
            width: 100%;
            margin-top: 20px;
            max-height: 800px;
            overflow-y: scroll;
        }

            .stable th {
                background: #f2f6f9;
                font-size: 14px;
                font-weight: 600;
            }

            .stable th, .stable td {
                border: 1px solid #e1e5ea; /* 设置表格、表头、单元格边框 */
                text-align: center;
                height: 48px;
            }
    </style>
}
<div id="PPEAddSupplyRequest" class="font-['SourceHanSansSC']">
    <a-style-provider hash-priority="high">
        <a-config-provider :locale="vlocale">
            <a-image :width="200"
                     :style="{ display: 'none',zIndex:100 }"
                     :preview="{visible:PPEAddSupplyRequestParams.previewShow.value,onVisibleChange:PPEAddSupplyRequestParams.setVisible}" :src="PPEAddSupplyRequestParams.imgUrl.value"></a-image>
            <m-pdf-pop-model></m-pdf-pop-model>
            <a-modal v-model:open="PPEAddSupplyRequestParams.popShow.value" width="70%" height="500px" :title="PPEAddSupplyRequestParams.popTitle.value " v-on:ok="PPEAddSupplyRequestParams.handlePopOk">
                <div v-if="PPEAddSupplyRequestParams.opType.value==1">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                        <div style="font-weight: 500; font-size: 16px;">总申请数量：<span style="font-weight: 600; font-size: 20px; color: #0064e5">{{PPEAddSupplyRequestParams.detailPagination.value.total}}</span></div>
                        <a-button type="primary" v-on:click="PPEAddSupplyRequestParams.clearData">清空数据</a-button>
                    </div>

                    <a-table :pagination="false" v-on:change="PPEAddSupplyRequestParams.handleDetailTableChange" :data-source="PPEAddSupplyRequestParams.detailDataSource.value" :columns="PPEAddSupplyRequestParams.detailColumns.value">
                    </a-table>
                </div>
                <div v-else>

                    <a-form style="margin-top:40px"
                            :model="PPEAddSupplyRequestParams.addParams.value">
                        <a-form-item label="姓名">
                            <a-input style="width:200px" v-model:value="PPEAddSupplyRequestParams.addParams.value.name" allow-clear placeholder="请填写姓名" />
                        </a-form-item>

                        <a-form-item label="工号">
                            <a-input style="width:200px" v-model:value="PPEAddSupplyRequestParams.addParams.value.code" allow-clear placeholder="请填写工号" />
                        </a-form-item>


                        <a-form-item label="申请数量">

                            <a-input-number v-model:value="PPEAddSupplyRequestParams.addParams.value.number" placeholder="申请数量" :disabled="PPEAddSupplyRequestParams.opType.value==1" min="1" />

                        </a-form-item>


                    </a-form>

                </div>

            </a-modal>



            <header class="px-5 box-border">
                <div class="flex items-center">
                    <div class="w-full h-[48px] text-[13px]  rounded-lg mx-auto my-[10px]  bg-white  text-[#888888] text-3xl flex items-center px-10">   <div class="w-22 h-22 bg-blue-200 mr-5"> <img class="w-full h-full cursor-pointer" v-on:click="PPEAddSupplyRequestParams.vvback()" src="~/Assets/nimgs/exit.png" alt="返回" /></div> <span class="text-[]">信息门户<span class="mx-2">/</span>劳防用品<span class="mx-2">/</span><span class="text-[#424758] text-[15px]">新增{{PPEAddSupplyRequestParams.TypeId.value==1?'普通':'特种'}}劳防用品申请</span> </span>  </div>
                </div>

                <a-card :bordered="true" class="w-full  mt-12">
                    <template #title>
                        <div class="w-full flex justify-between items-center;" style="background: #fafafa">
                            <div class="flex items-center"> <div>{{PPEAddSupplyRequestParams.TypeId.value==1?'普通':'特种'}}劳防用品申请</div> <div class="ml-7"></div></div>


                        </div>



                    </template>
                    <a-spin :spinning="PPEAddSupplyRequestParams.uploadLock.value" tip="加载中，请耐心等待..." />
                    <div class="title">单据信息</div>
                    <a-form layout="inline"
                            style="margin-top:20px"
                            :model="PPEAddSupplyRequestParams.configData.value">
                        <a-form-item label="申请单号：">
                            <a-input disabled v-model:value="PPEAddSupplyRequestParams.configData.value.name1">

                            </a-input>
                        </a-form-item>
                        <a-form-item label="申请人：">
                            <a-input disabled v-model:value="PPEAddSupplyRequestParams.configData.value.name2">

                            </a-input>
                        </a-form-item>
                        <a-form-item label="填报日期：">
                            <a-input disabled v-model:value="PPEAddSupplyRequestParams.configData.value.name3">

                            </a-input>
                        </a-form-item>
                        <a-form-item label="申领部门：">
                            <a-input disabled v-model:value="PPEAddSupplyRequestParams.configData.value.name4">

                            </a-input>
                        </a-form-item>
                        <a-form-item label="厂区">
                            <a-select :filter-option="PPEAddSupplyRequestParams.filterOption" placeholder="请选择厂区" allow-clear :options="PPEAddSupplyRequestParams.areaList.value" show-search v-model:value="PPEAddSupplyRequestParams.configData.value.FactoryAreaId"
                                      style="width:180px">


                            </a-select>
                        </a-form-item>
                        <a-form-item label="审批人">
                            <a-select :filter-option="PPEAddSupplyRequestParams.filterOption" placeholder="请选择审批人" allow-clear :options="PPEAddSupplyRequestParams.checkPersonList.value" show-search v-model:value="PPEAddSupplyRequestParams.configData.value.checkPersonId"
                                      style="width:180px">
                            </a-select>
                        </a-form-item>
                    </a-form>
                    <div class="title" style="margin-top:30px">物品申请详情</div>
                    @*<a-button style="margin-top:10px" v-on:click="PPEAddSupplyRequestParams.downloadTemplate" type="primary">下载模板</a-button>*@
                    <div class="box" style="max-height:340px;min-height:250px; overflow-y:scroll">
                        <table class="stable">
                            <tr>
                                <th>序号</th>
                                <th>劳防用品</th>
                                <th>图片</th>
                                <th>单位</th>
                                <th>规格</th>
                                <th>申请数量</th>
                                <th>防护说明</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(e,i) in PPEAddSupplyRequestParams.editInfo.value" :key="i">

                                <td>
                                    {{i+1}}

                                </td>
                                <td>

                                    <a-select v-model:value="e.a"
                                              show-search
                                              placeholder="请选择劳防用品"
                                              style="width:80%"
                                              :options="PPEAddSupplyRequestParams.editInfoOptions.value"
                                              :filter-option="PPEAddSupplyRequestParams.filterOption"
                                              v-on:change="PPEAddSupplyRequestParams.handleTypeChange(i,e)"></a-select>


                                </td>
                                <td style="width:100px">
                                    <a-image-preview-group>
                                        <a-space>

                                            <a-image v-for="ess in e.b" :width="50" :src="ess.url" />
                                        </a-space>
                                    </a-image-preview-group>

                                </td>
                                <td>
                                    {{e.c}}
                                </td>
                                <td style="max-width:400px;overflow-x:scroll;padding:0 20px">
                                    <a-space>

                                        <a-select v-for="(es,ei) in e.AttrList" :key="Math.random()" v-model:value="es.Selected"
                                                  show-search
                                                  :field-names="{
                                                  label: 'AttributeValue',
                                                  value: 'Id',
                                                  }"
                                                  v-on:change="PPEAddSupplyRequestParams.handleSTypeChange($event,i,ei)"
                                                  :placeholder="`${es.AttributeName}`"
                                                  style="width: 100px"
                                                  :options="es.ItemList"></a-select>

                                    </a-space>
                                </td>
                                <td>
                                    <a-input-number placeholder="数量" v-model:value="e.e" :min="0" />
                                </td>
                                <td style="max-width:220px;overflow-x:scroll;padding:0 10px">

                                    <div>{{e.p}}</div>
                                </td>
                                <td style="max-width:220px;overflow-x:scroll;padding:0 10px">
                                    <div>{{e.o}}</div>

                                </td>
                                <td>
                                    <a-button v-if="i==0" v-on:click="PPEAddSupplyRequestParams.addConfig" type="primary">新增</a-button>
                                    <a-button v-else v-on:click="PPEAddSupplyRequestParams.delConfig(i)" type="primary" danger>删除</a-button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="title" style="margin:20px 0">附件</div>
                    <a-form-item label="备注：">
                        <a-textarea style="width:600px" placeholder="请填写备注" v-model:value="PPEAddSupplyRequestParams.configData.value.name5">

                        </a-textarea>
                    </a-form-item>


                    <a-form-item label="附件：">

                        <a-upload v-model:file-list="PPEAddSupplyRequestParams.uploadImg.value.fileList"
                                  action="#"
                                  :item-render="PPEAddSupplyRequestParams.itemRender.value"
                                  v-on:change="PPEAddSupplyRequestParams.handleChange">

                            <a-button v-if="PPEAddSupplyRequestParams.uploadImg.value.fileList.length < 8" type="primary">+ 上传附件</a-button>

                        </a-upload>(请上传申请人及物品明细)
                    </a-form-item>


                </a-card>
            </header>
            <m-bottom-btns></m-bottom-btns>
        </a-config-provider>
    </a-style-provider>
</div>
@section Js{
    <script src="~/bussiness/js/base/tailwind.js"></script>
    <script type="module">
        import Composition from '../../bussiness/js/pg/PPE/AddSupplyRequest.js?v=@DateTime.Now.ToString("yyyyMMddHHmm")'
        import localeValues from '../../Bussiness/js/base/es/locale/zh_CN.js'
        singalApp('PPEAddSupplyRequest', Composition, localeValues)
    </script>
}
